<template>
  <div>
    <dialog-component-add-group v-if="Visiable" ref="dialogaddgroup"></dialog-component-add-group>
    <dialog-component-count v-if="Visiable" ref="dialogcount"></dialog-component-count>

    <dialog-component-manager-group v-if="Visiable" ref="dialogmanagergroup"
                                    @UpdateData="UpdateData"
    ></dialog-component-manager-group>


    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item>
        <el-button v-if="auths.groupadd!=null" style="margin: 30px auto 5px 30px;background: #409eff;display: inline;" icon="el-icon-plus"
                   type="primary" @click="handleClickAddGroup()"
        >添加团队
        </el-button>
        <el-button v-if="auths.groupdelete!=null" type="primary" icon="el-icon-delete" :disabled="deleteButton" @click="deleteGroupByList()">批量删除
        </el-button>
      </el-form-item>
      <span style="float: right;margin: 30px">
        <el-form-item label="团队名称：" width="20%">
      <el-input v-model="search.gname" placeholder="请输入团队名称"></el-input>
    </el-form-item>
    <el-form-item label="负责人：">
      <el-input v-model="search.gleaderName" placeholder="请输入负责人"></el-input>
    </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchGroup()">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="refresh()" plain>重置</el-button>
      </el-form-item>
      </span>

      <el-table :data="tableData" @selection-change="selectionChange()" @select="selectRow" @select-all="selectAll"
                style="width: 100%;margin: 0 auto;left: 40px"
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column type="index" prop="count" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="gname" label="团队名称" width="250">
        </el-table-column>
        <el-table-column prop="gleaderName" label="负责人" width="200">
        </el-table-column>
        <el-table-column prop="gnums" label="人数" width="100">
        </el-table-column>
        <el-table-column prop="gmtCreate" label="创建日期" width="200">
        </el-table-column>
        <el-table-column prop="gmtModified" label="修改日期" width="200">
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="success" size="mini" icon="el-icon-user-solid" :title="managegroup"
                       @click="handleClickManagerGroup(scope.row)"
            ></el-button>
            <el-button type="warning" size="mini" icon="el-icon-s-tools" :title="settinggroup"
                       @click="handleClickSetting(scope.row)"
            ></el-button>
            <el-button type="primary" size="mini" icon="el-icon-pie-chart" :title="managecount"
                       @click="handleClickCount(scope.row.gname)"
            ></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" :title="deletegroup"
                       @click="handleClickDelete(scope.row.gname)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="float:right">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="queryparams.page" :page-sizes="[5,10,15]" :page-size="queryparams.offset"
                       layout="total, sizes, prev, pager, next, jumper" :total="total"
        >
        </el-pagination>
      </div>

      <el-dialog title="团队管理" :visible.sync="GroupManagerVisible">
        <el-table
          :data="GrouptableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column type="index" label="序号" width="100"></el-table-column>
          <el-table-column
            prop="userName"
            label="用户名"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="roleName"
            label="角色"
            width="140"
          >
          </el-table-column>
          <el-table-column
            prop="addTime"
            label="加入时间" width="200"
          >
          </el-table-column>
          <el-table-column prop="handle" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="deleteGroupUser(scope.row)">删除</el-button>
              <el-button type="text" size="mini" @click="showRoleSelect(scope.row)">修改角色</el-button>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
        <el-button @click="cancelGroupManager()">取 消</el-button>
        <el-button type="primary" @click="changeGroupMessage()">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog v-if="auths.roleadd!=null" title="选择角色" :visible.sync="SelectRoleVisible" width="30%">
        <el-select v-model="rolevalue" placeholder="请选择">
          <el-option
            v-for="item in Roleoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
        <el-button @click="cancelSelectWin()">取 消</el-button>
        <el-button type="primary" @click="selectSure()">确 定</el-button>
        </span>
      </el-dialog>
    </el-form>
  </div>
</template>
<script>
import dialogComponentCount from '@/components/group/dialogComponentCount.vue'
import dialogComponentAddGroup from '@/components/group/dialogComponentAddGroup.vue'

import dialogComponentManagerGroup from '@/components/group/dialogComponentManagerGroup.vue'

import {
  getGroupList,
  countGroup,
  manageGroup,
  searchGroup,
  deleteGroupByGname,
  deleteGroupByList,
  getGroupUser, deleteGroupUser, getRoleList, updateGroupUserRole
} from '@/api/group'

export default {
  components: {
    dialogComponentCount,
    dialogComponentAddGroup,
    dialogComponentManagerGroup

  },
  data() {
    return {
      auths: '',
      rowMessage:'',
      rolevalue:'',
      Roleoptions: [
      ],
      SelectRoleVisible: false,
      GrouptableData: [],
      GroupManagerVisible: false,
      gid: '',
      deleteList: [],
      deleteButton: true,
      deletegroup: '删除团队',
      managegroup: '分配人员',
      settinggroup: '管理团队',
      managecount: '岗位统计',
      countData: [],
      // restaurants: [],
      state: '',
      searchflag: false,
      search: {
        gname: '',
        gleaderName: '',
        page: 1,
        offset: 10
      },

      tableData: [],
      Visiable: false,
      queryparams: {
        page: 1,
        offset: 10
      },
      total: 0,
      NorGroupUid:'',
      NorGroupGid:''
    }
  },
  provide: {
    page: 'page',
    offset: 'offset'
  },
  created() {
    this.getGroupData()
    this.getAllRole()
    this.auths = JSON.parse(getAuths())
  },
  methods: {

    // 选项框的确认
    selectSure(){

      console.log(this.rolevalue)
      // 发送请求进行修改
      updateGroupUserRole(this.NorGroupUid,this.NorGroupGid,this.rolevalue).then(res=>{
        if (res.code !== 200) return this.$message({ message: '修改失败', type: 'error', center: true })
        this.$message({ message: '修改成功', type: 'success', center: true })
        this.SelectRoleVisible = false
        this.getGroupList(this.rowMessage)
      })
    },

    cancelSelectWin(){
      this.SelectRoleVisible = false
    },

    getAllRole(){
      getRoleList().then(res=>{
        res.data.forEach(item=>{
          this.Roleoptions.push({
            value:item.rid,
            label: item.rname
          })
        })
      })
    },

    // 删除团队中的人
    deleteGroupUser(row){
      deleteGroupUser(row.uid,row.gid).then(res=>{
        if (res.code !== 200) return this.$message({ message: '删除失败', type: 'error', center: true })
        this.$message({ message: '删除成功', type: 'success', center: true })
        this.getGroupList(row)
      })
    },

    showRoleSelect(row){
      this.SelectRoleVisible = true;
      this.NorGroupUid = row.uid
      this.NorGroupGid = row.gid
      this.rowMessage = row
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },

    // 修改团队信息
    changeGroupMessage() {
      this.GroupManagerVisible = false

    },
    // 取消修改
    cancelGroupManager() {
      this.GroupManagerVisible = false
    },
    // 点击响应
    handleClickSetting(row) {
      this.GroupManagerVisible = true

      this.getGroupList(row)

    },

    getGroupList(row){
      getGroupUser(row.gid).then((res) => {
        this.GrouptableData = res.data
      })
    },

    UpdateData() {
      this.getGroupData()
    },
    // 批量删除操作
    async deleteGroupByList() {
      if (this.deleteList.length === 0) {
        this.$alert('请选择需要删除的角色数据', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
        return
      }
      const confirmResult = await this.$confirm('此操作将永久删除所选项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message({ message: '已取消删除', center: true })
      }
      deleteGroupByList(this.deleteList).then(res => {
        this.deleteList = []
        if (res.code !== 200) return this.$message({ message: '删除失败', type: 'error', center: true })

        this.$message({ message: '删除成功', type: 'success', center: true })
        this.getGroupData()
      })
    },
    selectionChange() {
      if (this.deleteList.length == 0) {
        this.deleteButton = true
      }
    },
    // 选中单行数据
    selectRow(selection, row) {
      this.deleteList = []
      for (let i = 0; i < selection.length; i++) {
        this.deleteList.push(selection[i].gname)
      }
      this.deleteButton = false
    },
    // 选中全部数据
    selectAll(selection) {
      this.deleteButton = !this.deleteButton
      console.log('11this.isClickSelectAll', this.isClickSelectAll)
      this.deleteList = []
      for (let i = 0; i < selection.length; i++) {
        this.deleteList.push(selection[i].gname)
      }
      console.log(this.deleteList)
    },
    handleClickDelete(gname) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 这里发送请求
          let url = 'del/group/by/name?gname=' + gname
          deleteGroupByGname(url).then(res => {
            if (res.result === 'SUCCESS' && res.code == 200) {
              this.$message({ type: 'success', message: '删除成功!' })
              this.getGroupData() // 重新加载数据
            } else {
              this.$message({ type: 'info', message: '删除失败!' })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    refresh() {
      this.search.gname = ''
      this.search.gleaderName = ''
      this.getGroupData()
    },
    handleClickManagerGroup(row) {
      this.Visiable = true
      this.$nextTick(() => {
        //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
        //init调用的是dialog-component组件里面的init方法
        //data是传递给弹窗页面的值
        // manageGroup(gname).then(res=>{
        this.$refs.dialogmanagergroup.init(row)
        // })
      })
    },
    handleClickCount(gname) {
      this.Visiable = true
      this.$nextTick(() => {
        countGroup(gname).then(res => {
          //   // this.countData=res.data
          this.$refs.dialogcount.init(res.data)
        })

      })
    },
    searchGroup() {
      this.searchflag = true
      // 先进行参数校验
      // 发送搜索请求
      searchGroup(this.search).then((res) => {
        if (res.result == 'SUCCESS' && res.code == 200) {
          this.queryparams.page = this.search.page
          this.queryparams.offset = this.search.offset
          this.total = res.data.total
          this.tableData = res.data.data
          // console.log(this.tableData )
        }
      })
    },
    handleSelect(item) {
      console.log(item)
    },
    handleIconClick(ev) {
      console.log(ev)
    },
    handleClick(row) {

      console.log(row)
    },
    handleSizeChange(newSize) {
      this.queryparams.offset = newSize
      this.getGroupData()
    },
    handleCurrentChange(val) {
      this.queryparams.page = val
      this.getGroupData()
    },
    handleClickAddGroup() {
      this.Visiable = true
      this.$nextTick(() => {
        //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
        //init调用的是dialog-component组件里面的init方法
        //data是传递给弹窗页面的值
        this.$refs.dialogaddgroup.init()
      })
    },
    getGroupData() {
      let url = '/get/groupdtos/by/page/' + this.queryparams.page + '/' + this.queryparams.offset
      getGroupList(url).then(res => {
        this.tableData = res.data.data
        this.total = res.data.total
      })
    }
  },
  clearForm() {
    this.form.groupname = ''
    this.form.headname = ''
  }
}
</script>

<style>

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

